<template>
  <div>
    <div class="type-title">iconfont 风格图标</div>
    <div class="icon-panel">
      <div class="icon-item" v-for="(icon, index) in getSystemIcon.fontIconList" :key="index" :title="icon.name" @click="selectIcon(icon)">
        <i
          class="iconfont f36"
          :class="{[icon.name]: true, 'active': selectIconName===icon.name}"></i>
        <span class="text">{{ icon.name }}</span>
      </div>
    </div>
    <div class="type-title">ant design 风格线性图标</div>
    <div class="icon-panel">
      <div class="icon-item" v-for="(icon, index) in getSystemIcon.actionIconList" :key="index" :title="icon.name" @click="selectIcon(icon)">
        <a-icon
          :type="icon.name"
          class="f36"
          :class="{'active': selectIconName===icon.name}"/>
        <span class="text">{{ icon.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import store from '@/store'
  export default {
    name: 'SelectIconCtl',
    data () {
      return {
        selectIconName: null
      }
    },
    props: {
      defaultIconName: String
    },
    mounted () {
      if (this.defaultIconName) {
        this.selectIconName = this.defaultIconName.includes('icon-') ? this.defaultIconName.split(' ').find(item => {
          return item.startsWith('icon-')
        }) : this.defaultIconName
      }
      this.getIconList()
    },
    computed: {
      ...mapGetters(['getSystemIcon'])
    },
    methods: {
      getIconList () {
        if (!this.getSystemIcon.fontIconList.length) {
          store.dispatch('readStyleIcons')
        }
      },
      selectIcon (item) {
        this.selectIconName = item.name
      }
    }
  }
</script>

<style scoped lang="less">
  .icon-panel{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    .icon-item{
      width:98px;
      height:80px;
      text-align: center;
      margin: 5px;
      .text{
        font-size: 12px;
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-top: 10px;
      }
    }
    i{
      cursor: pointer;
      &.active{
        color: royalblue;
      }
    }
  }
  .f36{
    font-size: 36px;
  }
  .type-title{
    margin: 5px 0px;
    font-size:16px;
    border-left: solid 4px royalblue;
    background-color: #dce1e1;
    padding:2px 5px;
    font-weight: bold;
  }
</style>
